<template>
    <div id="cutVoucher">
        <v-nav></v-nav>
        <div class="images">
            <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/cutVoucher/banner_coupona.jpg">
        </div>
        <div class="voucher" style="margin-bottom: 1.2rem;">
            <div class="getVoucher" v-for="x in data" :id="x.id">
                <ul class="centerUl">
                    <li class="money">
                        <span style="font-size:.31rem">￥</span>
                        <span style="font-size:.64rem">{{x.min_price}}</span>
                        <span style="margin-left: .12rem;font-size:.22rem" v-if="Number(x.min_price)!=Number(x.max_price)">满{{x.max_price}}元可用</span>
                    </li>
                    <li class="where">{{x.title}}</li>
                    <li class="time">有效期{{x.life}}小时</li>
                </ul>
                <!-- 未领取优惠券-->
                <ul class="useVou" v-if="x.type==3" @click="huanD" :id="x.id">
                    <li class="use">立即抢券</li>
                    <!--<li class="Vou">剩余{{x.stockNum}}张</li>-->
                </ul>
                <!--已领取-->
                <div class="received" v-if="x.type==2">
                    <img src="http://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/change/received_coupona.png">
                </div>
                <!--领光-->
                <div class="none" v-if="x.type==1">
                    <img src="http://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/change/looted_coupona.png">
                </div>
            </div>
            <!--遮罩层-->
            <div class="templBg" v-if="showTem"></div>
            <!--弹框-->
            <div class="posiBox" v-if="test">
                <span class="add">{{success}}</span>
                <span class="bBtn" @click="goLookMore">去下单</span>
            </div>
            <!--关闭叉号-->
            <div class="styleX" v-if="showTems" @click="Bback">
                <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/change/close_b.png">
            </div>
        </div>
        <v-footer></v-footer>
    </div>
</template>

<script>
  import store from "../store/newStore.js";
  import config from "../config/config.js";
  import share from "../share/share.js";
  import MtaH5 from 'mta-h5-analysis';
  import Nav from "../home/nav.vue";
  import Footer from "../home/footer.vue";
  export default {
    store,
    data(){
      return{
        useVou:true,
        received:false,
        none:false,
        showTem:false,
        showTems:false,
        test:false,
        data:[],
        id:'',
        success:'',
        timeTest:''
      }
    },
    computed:{
      ticket(){
        return this.$store.state.getTicket;
      }
    },
    components:{
      "v-nav":Nav,
      "v-footer":Footer,
    },
    methods: {
      goLookMore(){
        this.$router.push('/lookMore/'+17)
      },
      Bback() {
        this.showTem = false;
        this.showTems = false;
        this.test = false
      },
      huanD($event){
        this.id=$event.currentTarget.getAttribute('id');
        this.ExLargeCoupon();
      },
      GetLargeCouponList() {
        var tag = this.$route.params.tag;
        var value = JSON.stringify({
            "tag": tag,
            "token": localStorage.getItem('token')
          }),
          key = demo(value);
        axios.post('/home/coupon/GetLargeCouponList', {
          value: value,
          key: key,
        }, config)
          .then(function (response) {
            if (response.data.code == 200) {
              this.data = response.data.data;
              this.id = response.data.data.id;
            } else {

            }
          }.bind(this))
          .catch(function (error) {
            console.log(error);
          });
      },
      ExLargeCoupon() {
        var value = JSON.stringify({
            "id":this.id,
            "token": localStorage.getItem('token'),
          }),
          key = demo(value);
        axios.post('/home/coupon/ExLargeCoupon', {
          value: value,
          key: key,
          ticket:this.ticket
        }, config)
          .then(function (response) {
            if (response.data.code == 200) {
              this.showTem = true;
              this.showTems = true;
              this.test = true;
              this.success = '24小时后可再领取一张';
              // this.timeTest = '';
              this.GetLargeCouponList();
              this.$store.commit('increment',response.data.ticket);
            } else {
              this.showTem = true;
              this.showTems = true;
              this.test = true;
              this.success = response.data.msg;
            }
          }.bind(this))
          .catch(function (error) {
            console.log(error);
          });
      },
    },
    activated() {
      share({})
      this.GetLargeCouponList();
      MtaH5.init({
        "sid":'500594815',
        "cid":'500595819',
        "autoReport":0,
        "senseHash":0,
        "senseQuery":0,
        "performanceMonitor":0,
        "ignoreParams":[]
      });
      MtaH5.pgv();
      },
    deactivated(){
      this.$destroy(true);
    }
  }
</script>

<style>

</style>